<template>
    <div>
        <div v-if="questionType === '1'">
            <SingleChoiceQuestion
                :questionText="questionText"
                :options="options"
                :standardAnswer="standardAnswer"
                :correctAnswer="correctAnswer[0]"
            />
        </div>
        <div v-else-if="questionType === '2'">
            <MultipleChoiceQuestion
                :questionText="questionText"
                :options="options"
                :standardAnswer="standardAnswer"
                :correctAnswer="correctAnswer"
            />
        </div>
        <div v-else-if="questionType === '3'">
            <TrueFalseQuestion
                :questionText="questionText"
                :standardAnswer="standardAnswer"
                :correctAnswer="correctAnswer[0]"
            />
        </div>
        <div v-else-if="questionType === '4'">
            <FillInTheBlankQuestion
                :questionText="questionText"
                :standardAnswer="standardAnswer"
            />
        </div>
    </div>
</template>

<script>
import SingleChoiceQuestion from "./question/SingleChoiceQuestion";
import MultipleChoiceQuestion from "./question/MultipleChoiceQuestion";
import TrueFalseQuestion from "./question/TrueFalseQuestion";
import FillInTheBlankQuestion from "./question/FillInTheBlankQuestion";

export default {
    props: {
        questionType: String,
        questionText: String,
        options: Array, // Only for MultipleChoice
        standardAnswer: String, // 答案解释
        correctAnswer: Array, // 正确答案
    },
    components: {
        SingleChoiceQuestion,
        MultipleChoiceQuestion,
        TrueFalseQuestion,
        FillInTheBlankQuestion,
    },
};
</script>
